<template>
  <div>
    <!-- 顶部导航开始 -->
    <div class="nav_top w">
      <div class="logo1">
        <a href="">
          <img src="/img/wlh/logo.png" alt="" />
        </a>
      </div>
      <div class="header_city">
        <router-link to="/chooseCity" class="city_name">上海</router-link>
        <span class="around_city"></span>
        <!-- <div class="other_cities">
          <div class="hot_city1">热门城市</div>
          <ul class="manngcity">
            <li><a href="">西安</a></li>
          </ul>
          <div class="xu_line"></div>
          <div class="all_city">
            <a href="">全部城市 ></a>
          </div>
        </div> -->
      </div>
      <div class="header_search">
        <input type="text" class="search_it" placeholder="搜您想要的" />
      </div>
      <div class="search_button">
        <button>搜索</button>
      </div>
      <div class="header_user">
        <ul>
          <li><a href="">登录/注册</a></li>
          <li><a href="">海草云SaaS</a></li>
          <li><a href="">商家中心</a></li>
          <li>
            <a href="">服务导航<i></i></a>
          </li>
        </ul>
      </div>
    </div>
    <!-- 顶部导航结束 -->
    <!-- 面包屑导航栏开始 -->
    <div class="header__breadcrumb w">
      <div class="breadcrumb_first">
        <a href="">大连结婚 ></a>
        <a href="">大连婚纱摄影 ></a>
        <a href="">大连婚纱摄影套餐 ></a>
        <a href="">伯爵丽莎婚纱摄影（大连店） ></a>
      </div>
      <div></div>
      <div class="breadcrumb_sec">
        【年度性价比超高套系】3天2夜酒店+一价全包
      </div>
    </div>
    <!-- 面包屑导航栏结束 -->
    <!-- 头部展示详情开始 -->
    <div class="w package_header">
      <div class="package_header_imgs">
        <div class="big_img">
          <img
            :src="small_i < 0 ? meal_formation.index_pic : small_pic[small_i]"
            alt=""
          />
        </div>
        <div class="small_img">
          <div
            class="small_pic"
            v-for="(item, i) of small_pic"
            :key="i"
            @mouseenter="changeSmallPic(i)"
          >
            <img :src="item" />
          </div>
        </div>
      </div>
      <div class="package_header_info">
        <h1 class="package_info_title">
          {{ meal_formation.title }}
        </h1>
        <div class="package_info_price">
          <span class="renminbi">￥</span>{{ meal_formation.price
          }}<span class="old_price">￥6988.00</span>
        </div>
        <div class="package_info_tags">
          <div>· 可先预付1000.00元定金</div>
        </div>
        <div class="package_info_coupons">
          <div class="package_info_coupon_title">
            <span>优惠券</span>
          </div>
          <div class="package_info_coupons_coupon">
            <div>
              <span>￥1000</span><span>领取</span>
              <div class="hover">满6000减1000,全场可用</div>
            </div>
            <div>
              <span>￥500</span><span>领取</span>
              <div class="hover">满5000减500,全场可用</div>
            </div>
            <div>
              <span>￥3000</span><span>领取</span>
              <div class="hover">
                满10000减3000, 仅限会员app内领取, 全场可用
              </div>
            </div>
          </div>
        </div>
        <div class="package_info_order">
          <div class="package_info_coupon_title">
            <span>下单有礼</span>
          </div>
          <div class="package_info_order_right">
            <p>下单送情侣对戒+订制衬衫</p>
            <p>下单送情侣对戒+订制衬衫</p>
          </div>
        </div>
        <div class="package_info_consult">
          <div class="package_info_coupon_title">
            <span>咨询有礼</span>
          </div>
          <div class="package_info_content_text">预约咨询享专车探店</div>
          <div class="package_info_consult_chat">领取</div>
        </div>
        <div class="package_info_huabei">
          <div class="package_info_coupon_title">
            <span>花呗分期</span>
          </div>
          <div class="package_info_content_text">
            花呗分期付款：月供<span class="package_info_huabei_price"
              >￥626.01</span
            >起
          </div>
        </div>
        <div class="package_info_bottom">
          <div class="a_red_button">咨询底价</div>
        </div>
      </div>
      <div class="package_header_message">
        <div class="merchantCard-wrapper">
          <div class="shop_grade">
            <img
              src="https://qnm.hunliji.com/o_1d5oet034gippdn1p7jcg1emft.png?imageView2/1/w/88/h/96"
            />
          </div>
          <a href="" class="merchantCard-logo">
            <img
              src="https://qnm.hunliji.com/E7B3C7780FFA739C12A9BE374C2283C2.jpg?imageView2/1/w/100/h/100"
            />
          </a>
          <div class="merchantCard-title">
            <a href="" class="merchantCard-title-name">
              伯爵丽莎婚纱摄影（大连店）
            </a>
            <span
              ><img
                src="http://qnm.hunliji.com/o_1bek2rugmjok6egc4rfq8dnce.png"
                alt=""
            /></span>
          </div>
          <div class="a_red_button">私信商家</div>
          <div class="merchantCard-bottom">
            <div class="merchantCard-comments">
              <span></span>
              <span>1457条</span>
              <span>100%好评</span>
            </div>
          </div>
          <div class="package_header_share">
            <span>收藏1934</span>
            <span> 分享</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 头部展示详情开始 -->
    <!-- 商品详情介绍开始 -->
    <div class="package_content w">
      <!-- 左边 -->
      <div class="package_content_tabs">
        <!-- 标题导航 -->
        <div class="ant-anchor">
          <ul>
            <li class="active_white">
              <router-link to="">套餐参数</router-link>
            </li>
            <li><router-link to="">图文详情</router-link></li>
            <li>
              <router-link to="">用户评论({{ total_num }})</router-link>
            </li>
          </ul>
        </div>
        <!-- 内容 -->
        <div class="package_content_tabs_main">
          <div class="package_content_tabs_header">
            <img
              src="https://qnm.hunliji.com/o_1d7ccbasa1h4e1sas1tm2p3oss79.png"
              alt=""
            />
            <span>套餐参数</span>
          </div>
          <!-- 套餐参数项 -->
          <div class="package_content_param_item">
            <div class="package_content_param_item_title">造型</div>
            <div class="package_content_param_child">
              <div class="package_content_param_child_title">新浪服装</div>
              <div class="package_content_param_child_desc">6套</div>
            </div>
            <div class="package_content_param_child">
              <div class="package_content_param_child_title">新娘服装</div>
              <div class="package_content_param_child_desc">6套</div>
            </div>
            <div class="package_content_param_child">
              <div class="package_content_param_child_title">服装说明</div>
              <div class="package_content_param_child_desc">
                服装造型：服装不分区域，2021新款婚纱任选，提供男女服装共12套（各6套），全场服装不分区任选，最多可自带服装1套/人，自带服装计入总数内。
              </div>
            </div>
            <div class="package_content_param_child">
              <div class="package_content_param_child_title">造型说明</div>
              <div class="package_content_param_child_desc">
                造型：提供整体面妆6次/人，造型6组/人
              </div>
            </div>
          </div>
          <!-- 图文详情 -->
          <div class="package_content_tabs_header">
            <img
              src="https://qnm.hunliji.com/o_1d7ccbasa1h4e1sas1tm2p3oss79.png"
              alt=""
            />
            <span>图文详情</span>
          </div>
          <img
            src="https://qnm.hunliji.com/o_1ess739ms3s11n3r1dpu2vi16bf2mp.jpg?imageView2/2/w/680"
            alt=""
          />
          <img
            src="https://qnm.hunliji.com/o_1esu81h69daro0513n9q8c16t04k.jpg?imageView2/2/w/680"
            alt=""
          />
          <img
            src="https://qnm.hunliji.com/o_1ess739msng9dav10tospl5db2mr.jpg?imageView2/2/w/680"
            alt=""
          />
          <img
            src="https://qnm.hunliji.com/o_1ess739msthg1rtq1lpetaf1a5c2ms.jpg?imageView2/2/w/680"
            alt=""
          />
          <img
            src="https://qnm.hunliji.com/o_1esu81n9c1ff7hiu16981c871nio50.jpg?imageView2/2/w/680"
            alt=""
          />
          <img
            src="https://qnm.hunliji.com/o_1ess739mss1mug39v3ajsj4r2mu.jpg?imageView2/2/w/680"
            alt=""
          />
          <img
            src="https://qnm.hunliji.com/o_1ess739ms197q13r712nd1tag17av2mv.jpg?imageView2/2/w/680"
            alt=""
          />
          <!-- 用户评论 -->
          <div class="package_content_tabs_header">
            <img
              src="https://qnm.hunliji.com/o_1d7ccbasa1h4e1sas1tm2p3oss79.png"
              alt=""
            />
            <span>用户评论</span>
          </div>
          <!-- 评论内容的展示 -->
          <div class="comments_tags">
            <div
              class="comments_tag"
              :class="currentCommentStyle == '全部' ? 'comment_active' : ''"
              @click="getCommentContent('全部')"
            >
              全部({{ total_num }})
            </div>
            <div
              class="comments_tag"
              :class="
                currentCommentStyle == item.keyword ? 'comment_active' : ''
              "
              v-for="(item, i) of comment_style"
              :key="i"
              @click="getCommentContent(item.keyword)"
            >
              {{ item.keyword }}({{ item.num }})
            </div>
          </div>
          <div
            class="comment_list"
            v-for="(item, index) of commentList"
            :key="index"
          >
            <!-- 用户头像 -->
            <div class="comment_user_img">
              <div>
                <img :src="item.user_avater" />
              </div>
            </div>
            <!-- 评价内容 -->
            <div class="comment_list_container">
              <!-- 评论星级 -->
              <div class="comment_list_header">
                <div class="comment_list_name">
                  <div class="phone">{{ item.nickname }}</div>
                  <div class="date">{{ item.comment_time }}</div>
                  <div class="comment_list_stars">
                    <span v-for="(xing, i) of item.comment_score" :key="i"
                      ></span
                    >
                  </div>
                </div>
              </div>
              <!-- 评论文字 -->
              <div class="comment_list_content">
                {{ item.content }}
              </div>
              <!-- 评论图片 -->
              <div class="comment_list_img">
                <div class="comment_list_img_container">
                  <img class="heng" :src="item.comment_pic1" alt="" />
                  <!-- 隐藏的大图 -->
                  <div
                    class="comment_list_img_hover"
                    v-if="item.pic1 !== undefined"
                  >
                    <img :src="item.comment_pic1" alt="" />
                  </div>
                </div>
              </div>
              <div class="comment_list_img">
                <div class="comment_list_img_container">
                  <img class="heng" :src="item.comment_pic2" alt="" />
                  <!-- 隐藏的大图 -->
                  <div
                    class="comment_list_img_hover"
                    v-if="item.pic1 !== undefined"
                  >
                    <img :src="item.comment_pic2" alt="" />
                  </div>
                </div>
              </div>
              <div class="comment_list_img">
                <div class="comment_list_img_container">
                  <img class="heng" :src="item.comment_pic3" alt="" />
                  <!-- 隐藏的大图 -->
                  <div
                    class="comment_list_img_hover"
                    v-if="item.pic1 !== undefined"
                  >
                    <img :src="item.comment_pic3" alt="" />
                  </div>
                </div>
              </div>
              <div class="comment_list_img">
                <div class="comment_list_img_container">
                  <img class="heng" :src="item.comment_pic4" alt="" />
                  <!-- 隐藏的大图 -->
                  <div
                    class="comment_list_img_hover"
                    v-if="item.pic1 !== undefined"
                  >
                    <img :src="item.comment_pic4" alt="" />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- <div class="list__pagination__wrapper">分页查询预留的区域</div> -->
        </div>
      </div>
      <!-- 右边 -->
      <div class="package_content_hot">
        <div class="anliHot-wrapper-title">同类热卖</div>
        <div class="anliHot-item">
          <a href="">
            <img
              src="https://qnm.hunliji.com/645F9B476B6913DD54C3EF44A5D35002.jpg?imageView2/2/w/640/h/356"
              alt=""
            />
          </a>
          <!-- 绝对定位的信息框 -->
          <div class="anliHot-desc">
            <a
              href=""
              class="anliHot-title"
              title="【高定婚照】明星团队+一线妆品 全新拍摄主题任选"
            >
              【高定婚照】明星团队+一线妆品 全新拍摄主题任选
            </a>
            <div class="anliHot-merchant" title="洛可可全球旅拍大连站">
              <a
                target="_blank"
                rel="noopener noreferrer"
                href="/merchant/detail_3301"
                >洛可可全球旅拍大连站</a
              >
            </div>
            <span class="anliHot-price">
              <span class="anliHot-price-rmb">￥</span>7999
            </span>
            <span class="anliHot-goodRate">99%好评</span>
          </div>
        </div>
        <div class="anliHot-item">
          <a href="">
            <img
              src="https://qnm.hunliji.com/645F9B476B6913DD54C3EF44A5D35002.jpg?imageView2/2/w/640/h/356"
              alt=""
            />
          </a>
          <!-- 绝对定位的信息框 -->
          <div class="anliHot-desc">
            <a
              href=""
              class="anliHot-title"
              title="【高定婚照】明星团队+一线妆品 全新拍摄主题任选"
            >
              【高定婚照】明星团队+一线妆品 全新拍摄主题任选
            </a>
            <div class="anliHot-merchant" title="洛可可全球旅拍大连站">
              <a
                target="_blank"
                rel="noopener noreferrer"
                href="/merchant/detail_3301"
                >洛可可全球旅拍大连站</a
              >
            </div>
            <span class="anliHot-price">
              <span class="anliHot-price-rmb">￥</span>7999
            </span>
            <span class="anliHot-goodRate">99%好评</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 商品详情介绍结束 -->
    <!-- 最新套餐推荐 -->
    <div class="anliHot-wrapper w">
      <div class="anliHot-wrapper-title">最新套餐</div>
      <div class="zuixin-colums-list">
        <div class="anliHot-item">
          <a href="">
            <img
              src="https://qnm.hunliji.com/645F9B476B6913DD54C3EF44A5D35002.jpg?imageView2/2/w/640/h/356"
              alt=""
            />
          </a>
          <!-- 绝对定位的信息框 -->
          <div class="anliHot-desc">
            <a
              href=""
              class="anliHot-title"
              title="【高定婚照】明星团队+一线妆品 全新拍摄主题任选"
            >
              【高定婚照】明星团队+一线妆品 全新拍摄主题任选
            </a>
            <div class="anliHot-merchant" title="洛可可全球旅拍大连站">
              <a
                target="_blank"
                rel="noopener noreferrer"
                href="/merchant/detail_3301"
                >洛可可全球旅拍大连站</a
              >
            </div>
            <span class="anliHot-price">
              <span class="anliHot-price-rmb">￥</span>7999
            </span>
            <span class="anliHot-goodRate">99%好评</span>
          </div>
        </div>
        <div class="anliHot-item">
          <a href="">
            <img
              src="https://qnm.hunliji.com/645F9B476B6913DD54C3EF44A5D35002.jpg?imageView2/2/w/640/h/356"
              alt=""
            />
          </a>
          <!-- 绝对定位的信息框 -->
          <div class="anliHot-desc">
            <a
              href=""
              class="anliHot-title"
              title="【高定婚照】明星团队+一线妆品 全新拍摄主题任选"
            >
              【高定婚照】明星团队+一线妆品 全新拍摄主题任选
            </a>
            <div class="anliHot-merchant" title="洛可可全球旅拍大连站">
              <a
                target="_blank"
                rel="noopener noreferrer"
                href="/merchant/detail_3301"
                >洛可可全球旅拍大连站</a
              >
            </div>
            <span class="anliHot-price">
              <span class="anliHot-price-rmb">￥</span>7999
            </span>
            <span class="anliHot-goodRate">99%好评</span>
          </div>
        </div>
        <div class="anliHot-item">
          <a href="">
            <img
              src="https://qnm.hunliji.com/645F9B476B6913DD54C3EF44A5D35002.jpg?imageView2/2/w/640/h/356"
              alt=""
            />
          </a>
          <!-- 绝对定位的信息框 -->
          <div class="anliHot-desc">
            <a
              href=""
              class="anliHot-title"
              title="【高定婚照】明星团队+一线妆品 全新拍摄主题任选"
            >
              【高定婚照】明星团队+一线妆品 全新拍摄主题任选
            </a>
            <div class="anliHot-merchant" title="洛可可全球旅拍大连站">
              <a
                target="_blank"
                rel="noopener noreferrer"
                href="/merchant/detail_3301"
                >洛可可全球旅拍大连站</a
              >
            </div>
            <span class="anliHot-price">
              <span class="anliHot-price-rmb">￥</span>7999
            </span>
            <span class="anliHot-goodRate">99%好评</span>
          </div>
        </div>
        <div class="anliHot-item">
          <a href="">
            <img
              src="https://qnm.hunliji.com/645F9B476B6913DD54C3EF44A5D35002.jpg?imageView2/2/w/640/h/356"
              alt=""
            />
          </a>
          <!-- 绝对定位的信息框 -->
          <div class="anliHot-desc">
            <a
              href=""
              class="anliHot-title"
              title="【高定婚照】明星团队+一线妆品 全新拍摄主题任选"
            >
              【高定婚照】明星团队+一线妆品 全新拍摄主题任选
            </a>
            <div class="anliHot-merchant" title="洛可可全球旅拍大连站">
              <a
                target="_blank"
                rel="noopener noreferrer"
                href="/merchant/detail_3301"
                >洛可可全球旅拍大连站</a
              >
            </div>
            <span class="anliHot-price">
              <span class="anliHot-price-rmb">￥</span>7999
            </span>
            <span class="anliHot-goodRate">99%好评</span>
          </div>
        </div>
        <div class="anliHot-item">
          <a href="">
            <img
              src="https://qnm.hunliji.com/645F9B476B6913DD54C3EF44A5D35002.jpg?imageView2/2/w/640/h/356"
              alt=""
            />
          </a>
          <!-- 绝对定位的信息框 -->
          <div class="anliHot-desc">
            <a
              href=""
              class="anliHot-title"
              title="【高定婚照】明星团队+一线妆品 全新拍摄主题任选"
            >
              【高定婚照】明星团队+一线妆品 全新拍摄主题任选
            </a>
            <div class="anliHot-merchant" title="洛可可全球旅拍大连站">
              <a
                target="_blank"
                rel="noopener noreferrer"
                href="/merchant/detail_3301"
                >洛可可全球旅拍大连站</a
              >
            </div>
            <span class="anliHot-price">
              <span class="anliHot-price-rmb">￥</span>7999
            </span>
            <span class="anliHot-goodRate">99%好评</span>
          </div>
        </div>
      </div>
    </div>
    <!--同类套餐商家推荐 -->
    <div class="HLPC-div__wrapper w">
      <div class="anliHot-wrapper-title">同类套餐商家推荐</div>
      <div class="zuixin-colums-list">
        <div class="zuixin-colums-list-item">
          <a href=""
            ><img
              src="https://qnm.hunliji.com/3681C833F5DF9E602DDC7DA3191BBFBB"
              alt=""
          /></a>
          <div class="info">
            <h4 class="title">雅云摄影旗舰店</h4>
            <div class="comments">
              <span class="num">1177评价</span>
              <span class="rank">100%好评</span>
            </div>
          </div>
        </div>
        <div class="zuixin-colums-list-item">
          <a href=""
            ><img
              src="https://qnm.hunliji.com/3681C833F5DF9E602DDC7DA3191BBFBB"
              alt=""
          /></a>
          <div class="info">
            <h4 class="title">雅云摄影旗舰店</h4>
            <div class="comments">
              <span class="num">1177评价</span>
              <span class="rank">100%好评</span>
            </div>
          </div>
        </div>
        <div class="zuixin-colums-list-item">
          <a href=""
            ><img
              src="https://qnm.hunliji.com/3681C833F5DF9E602DDC7DA3191BBFBB"
              alt=""
          /></a>
          <div class="info">
            <h4 class="title">雅云摄影旗舰店</h4>
            <div class="comments">
              <span class="num">1177评价</span>
              <span class="rank">100%好评</span>
            </div>
          </div>
        </div>
        <div class="zuixin-colums-list-item">
          <a href=""
            ><img
              src="https://qnm.hunliji.com/3681C833F5DF9E602DDC7DA3191BBFBB"
              alt=""
          /></a>
          <div class="info">
            <h4 class="title">雅云摄影旗舰店</h4>
            <div class="comments">
              <span class="num">1177评价</span>
              <span class="rank">100%好评</span>
            </div>
          </div>
        </div>
        <div class="zuixin-colums-list-item">
          <a href=""
            ><img
              src="https://qnm.hunliji.com/3681C833F5DF9E602DDC7DA3191BBFBB"
              alt=""
          /></a>
          <div class="info">
            <h4 class="title">雅云摄影旗舰店</h4>
            <div class="comments">
              <span class="num">1177评价</span>
              <span class="rank">100%好评</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <my-footer></my-footer>
  </div>
</template>
<script>
// 引入第三方事件函数库
import moment from "moment";
export default {
  data() {
    return {
      meal_id: 1,
      meal_formation: [],
      small_pic: [],
      small_i: -1,
      // 变量comment_style存放评论类别
      comment_style: [],
      // total_num评论总条数 ，由所有类型评论相加而来
      total_num: 0,
      // 评论内容数组
      commentList: [],
      // 当前处于哪一个评论种类分类
      currentCommentStyle: "全部",
    };
  },
  mounted() {
    // 获取地址栏传递的旅拍套餐详情的meal_id
    let meal_id = location.href.slice(-1);
    this.meal_id = meal_id;
    // 发送ajax请求获取相对的套餐详情信息
    this.axios.get(`/travel/show/${meal_id}`).then((res) => {
      this.meal_formation = res.data; //这是套餐的所有信息
      // 为了在html中以循环形式渲染页面所以将小图片单独放进数组保存
      this.small_pic = [
        res.data.small_pic_1,
        res.data.small_pic_2,
        res.data.small_pic_3,
        res.data.small_pic_4,
        res.data.small_pic_5,
      ];
    });
    // 调用获取评论分类
    this.getCommentStyle();
    // 获取评论默认内容-分类为全部
    this.getCommentContent("全部");
  },
  methods: {
    // 鼠标覆盖时：将小图片的红框固定同时将大图改为对应的小图片
    changeSmallPic(i) {
      console.log("---111---");
      //形参i传进来保存到data中表示当前小图在数组中的索引
      this.small_i = i;
      console.log(this.small_i);
    },
    // 请求评论分类的方法
    getCommentStyle() {
      let meal_id = location.href.slice(-1);
      this.axios(`/travel/comment_style?meal_id=${meal_id}`).then((res) => {
        this.comment_style = res.data;
        // 计算评论的总条数
        res.data.forEach((item) => {
          this.total_num += item.num;
        });
      });
    },
    // 请求评论记录的方法-参数即种类
    getCommentContent(style) {
      let meal_id = this.meal_id;
      let url = `http://127.0.0.1:5050/v1/travel/comment?meal_id=${meal_id}&keyword=${style}`;
      this.axios.get(url).then((res) => {
        let arr = res.data;
        arr.forEach((item, i) => {
          arr[i].comment_time = moment(parseInt(item.comment_time)).format(
            "YY-MM-DD HH:mm"
          );
          console.log(arr[i].comment_time);
        });
        this.commentList = arr;
      });
      // 改变当前评论分类
      this.currentCommentStyle = style;
    },
  },
};
</script>
<style scoped>
@import url(/css/photo_meal.css);
</style>